<!--移动端——基础配置-->
<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">移动页配置</div>
      <div class="ele-page-desc">
        用于移动页展示等场景。
      </div>
    </div>
    <div style="padding-bottom: 71px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
        <div class="ele-body">
          <el-card shadow="never" header="基础配置" body-style="padding: 22px 22px 0 22px;" >
            <el-row :gutter="15">
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="服务商户:" label-width="130px" prop="systemName">
                  <!--input 限制只能输入整数-->
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.serviceMerchant" placeholder="请输入服务商户数" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="视频剪辑数:" label-width="130px" prop="theRecord">
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.videClipNumber" placeholder="请输入视频剪辑数" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="全网曝光次:" label-width="130px" prop="forTheRecord">
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.exposureTimes" placeholder="请输入全网曝光次数" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="账号授权:" label-width="130px" prop="versionInformation">
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.accountAuthorization" placeholder="请输入账号授权个数" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="活动营销:" label-width="130px" prop="versionInformation">
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.eventMarketing" placeholder="请输入活动营销场数" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="数字人剪辑:" label-width="130px" prop="versionInformation">
                  <el-input
                    class="delInput"
                    type="number"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    v-model.number="form.szrClip" placeholder="请输入数字人剪辑条数" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="8" :xl="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input maxlength="11" v-model="form.phoneNumber" placeholder="请输入联系电话" clearable/>
                </el-form-item>
              </el-col>
              <!--<el-col :xs="24" :sm="24" :lg="24" :xl="24">
                <el-form-item label="LOGO图" prop="coverImage">
                  <ele-image-upload
                    accept=".jpg,.jpeg,.png"
                    :limit="1"
                    :multiple="false"
                    v-model="fileList"
                    :auto-upload="false"
                    :before-remove="onBeforeRemove"
                  />
                  <div style="font-size: 12px;color: #ccc">建议图片尺寸为716*272</div>
                </el-form-item>
              </el-col>-->
            </el-row>
          </el-card>
        </div>
        <el-row style="padding:0 15px;" :gutter="20">
          <!--矩阵功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="矩阵功能" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="矩阵视频:">
                <el-input v-model="form.matrixVideo" placeholder="请输入矩阵视频链接" clearable></el-input>
                <!-- drag:是否启用拖拽上传 -->
                <!--<div class="upload-demo" @click="uploadClick">
                  <video :src="form.matrixVideo" class="video-avatar" v-if="form.matrixVideo"></video>
                  <i class="el-icon-plus" v-else></i>
                </div>-->
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.matrixVideo)" v-if="form.matrixVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.matrixVideo" @click.stop="delVideo(1)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; 矩阵视频 drag:是否启用拖拽上传                  :on-change="onUpload" &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,1)}"
                  :on-success="handleAvatarSuccess"
                  class="upload-demo relative"
                  :class="form.matrixVideo ? 'no-hover' : ''"
                  :disabled="form.matrixVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.matrixVideo" :src="form.matrixVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>

              <el-form-item label="矩阵详情:" prop="loginBackground">
                <el-button @click="addDetial(form.matrixDetails,1)">{{form.matrixDetails ? '修改' : '添加'}}矩阵详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--视频剪辑功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="视频剪辑功能" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="视频剪辑视频:">
                <el-input v-model="form.clipVideo" placeholder="请输入视频剪辑视频链接" clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.clipVideo)" v-if="form.clipVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.clipVideo" @click="delVideo(2)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,2)}"
                  class="upload-demo"
                  :class="form.clipVideo ? 'no-hover' : ''"
                  :disabled="form.clipVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.clipVideo" :src="form.clipVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>

              <el-form-item label="视频剪辑详情:" prop="loginBackground">
                <el-button @click="addDetial(form.clipDetails,2)">{{form.clipDetails ? '修改' : '添加'}}视频剪辑详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--云闪推功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="云闪推功能" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="云闪推视频:" prop="loginBackground">
                <el-input v-model="form.pushVideo" placeholder="请输入云闪推视频链接" clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.pushVideo)" v-if="form.pushVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.pushVideo" @click="delVideo(3)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,3)}"
                  class="upload-demo"
                  :class="form.pushVideo ? 'no-hover' : ''"
                  :disabled="form.pushVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.pushVideo" :src="form.pushVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="云闪推详情:" prop="loginBackground">
                <el-button @click="addDetial(form.pushDetails,3)">{{form.pushDetails ? '修改' : '添加'}}云闪推详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>

          <!--现场大屏功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="现场大屏功能" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="现场大屏视频:" prop="loginBackground">
                <el-input v-model="form.largeVideo" placeholder="请输入现场大屏视频链接" clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.largeVideo)" v-if="form.largeVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.largeVideo" @click="delVideo(4)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,4)}"
                  class="upload-demo"
                  :class="form.largeVideo ? 'no-hover' : ''"
                  :disabled="form.largeVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.largeVideo" :src="form.largeVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="现场大屏详情:" prop="loginBackground">
                <el-button @click="addDetial(form.largeDetails,4)">{{form.largeDetails ? '修改' : '添加'}}现场大屏详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>

          <!--抖支付功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="抖支付功能介绍" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="抖支付视频:" prop="loginBackground">
                <el-input v-model="form.doypayVideo" placeholder="请输入抖支付视频链接" clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.doypayVideo)" v-if="form.doypayVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.doypayVideo" @click="delVideo(5)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,5)}"
                  class="upload-demo"
                  :class="form.doypayVideo ? 'no-hover' : ''"
                  :disabled="form.doypayVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.doypayVideo" :src="form.doypayVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="抖支付详情:" prop="loginBackground">
                <el-button @click="addDetial(form.doypagDetails,5)">{{form.doypagDetails ? '修改' : '添加'}}抖支付详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
          <!--数字人功能-->
          <el-col :xs="12" :sm="12" :lg="8" :xl="8" class="m-bottom15">
            <el-card shadow="never" header="数字人功能" body-style="padding: 22px 22px 0 22px;">
              <el-form-item label="数字人视频:" prop="loginBackground">
                <el-input v-model="form.szrVideo" placeholder="请输入数字人视频链接" clearable></el-input>
                <!--悬浮播放按钮-->
                <!--<div class="positive-btn flex" @click.stop="download(form.szrVideo)" v-if="form.szrVideo">
                  <i class="el-icon-caret-right"></i>
                </div>
                &lt;!&ndash;删除视频&ndash;&gt;
                <div class="del-position flex" v-if="form.szrVideo" @click="delVideo(6)">
                  <i class="el-icon-close"></i>
                </div>
                &lt;!&ndash; drag:是否启用拖拽上传 &ndash;&gt;
                <el-upload
                  :on-change="(file, fileList) => {onUpload( file, fileList,6)}"
                  :on-success="handleAvatarSuccess"
                  class="upload-demo"
                  :class="form.szrVideo ? 'no-hover' : ''"
                  :disabled="form.szrVideo ? true : false"
                  :show-file-list="false"
                  :limit="1"
                  :action="ossUrl"
                  accept=".mp4,.3gp,.mov">
                  <video v-if="form.szrVideo" :src="form.szrVideo" class="video-avatar"></video>
                  <i class="el-icon-plus" v-else></i>
                </el-upload>-->
              </el-form-item>
              <el-form-item label="数字人详情:" prop="loginBackground">
                <el-button @click="addDetial(form.szrDetails,6)">{{form.szrDetails ? '修改' : '添加'}}数字人详情</el-button>
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
        <!-- 底部工具栏 -->
        <div class="ele-bottom-tool">
          <div v-if="validMsg" class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    <!--上传视频文件，弹框-->
    <file-upload
      :visible.sync="folderUpload"
      @done="onDone"
    />
    <!-- 新建/编辑 详情弹窗 -->
    <add-detail ref="detail" :visible.sync="addShow" @done="reload"></add-detail>
  </div>
</template>

<script>
  import EleImageUpload from 'ele-admin/es/ele-image-upload';
  import {userOssSignature} from "@/api/creatCenter/material";
  import {getToken} from "@/utils/token-util";
  import axios from "axios";
  import AddDetail from "@/views/system/basicConfiguration/components/add-detail";
  import {saveMobileConfig,queryMobileConfig} from "@/api/system/basicConfiguration";
  import fileUpload from './components/file-upload.vue';

  export default {
    name: "index.vue",
    components: {AddDetail, fileUpload, EleImageUpload},
    data(){
      return{
        ossUrl:localStorage.getItem('ossUrl')?localStorage.getItem('ossUrl'):'', //上传图片action
        // 上传文件弹窗是否打开
        folderUpload:false,
        // 表单验证信息
        validMsg: '',
        // 表单数据
        form: {
        },

        fileList:{},
        videoUrl: '',
        // 表单提交状态
        loading: false,
        // 表单验证规则
        rules: {},

        // 是否显示编辑弹窗
        addShow: false,
        // 当前编辑数据
        current: null,
        matrixUrl:'',  // 矩阵视频

        // 上传背景图片url
        fileList:[],
        dataInfo:{},
        data:{}
      }
    },
    created(){
      this.queryConfigs()

    },
    mounted() {
    },
    methods: {
      /* 删除增加确认弹窗 */
      onBeforeRemove() {
        return new Promise((resolve, reject) => {
          this.$confirm('确定要删除吗?', '提示', {
            type: 'warning'
          })
            .then(() => {
              resolve();
            })
            .catch(() => {
              reject();
            });
        });
      },

      async uploadBj(){
        this.dataInfo = await userOssSignature()
        console.log('this.dataInfo',this.dataInfo)
        let file = this.fileList[0].file

        let filename=file.name;
        let markIndex=(filename).lastIndexOf('.');
        let suffix=filename.substring(markIndex)    // 图片后缀(例.jpg)
        let date=new Date().getTime();    // 当前时间戳
        // 构建请求参数
        let param = new FormData()
        param.append("key", this.dataInfo.dir + date+suffix)
        param.append("policy", this.dataInfo.policy)
        param.append("OSSAccessKeyId", this.dataInfo.accessId)
        param.append("success_action_status", '200')
        // param.append("callback",  this.dataInfo.callback)     //回调（not)
        param.append("signature", this.dataInfo.signature)
        param.append("file", file, file.name)
        param.append('success_action_status', '200')
        let config = {
          headers: {
            'Access-Control-Allow-Origin': '*',
            'x-oss-callback-Authorization': getToken()
          }
        }
        axios.post(this.dataInfo.host, param, config).then(res => {
          if(res.status==200){
            console.log('this.dataInfo.host',this.dataInfo.host+'/'+date+suffix)
            let url=this.dataInfo.host+'/'+date+suffix;
            this.form.coverImage=url;
            console.log(' this.form.coverImage',this.form.coverImage,'url',url)
            let type=file.type;
            this.fileList=[]
            this.uploadApi()
          }
          else{
            this.$message.error('上传失败');
          }

        }).catch(err => {
          console.log(err)
        })
        // }
      },
      // 跳转下载视频
      download(url){
        console.log("点击跳转下载视频",url)
        window.open(url)
      },
      // 根据分类删除视频
      delVideo(type){
        console.log('根据分类删除视频',type)
        return new Promise((resolve, reject) => {
          this.$confirm('确定要删除该视频吗?', '提示', {
            type: 'warning'
          })
            .then(() => {
              switch(type)
              {
                case 1:
                  this.$set(this.form,'matrixVideo','')
                  break;
                case 2:
                  this.$set(this.form,'clipVideo','')
                  break;
                case 3:
                  this.$set(this.form,'pushVideo','')
                  break;
                case 4:
                  this.$set(this.form,'largeVideo','')
                  break;
                case 5:
                  this.$set(this.form,'doypayVideo','')
                  break;
                case 6:
                  this.$set(this.form,'szrVideo','')
                  break;
                default:
                  console.log("进入default")
                  break;
              }
            })
            .catch(() => {
              reject();
            });
        });
      },
      queryConfigs(){
        queryMobileConfig()
          .then((data) => {
            this.fileList=[]
            this.data=data.data
            this.form=data.data
            let url= {url: this.data.coverImage}
            this.fileList.push(url)
            console.log('data',data)
          }).catch((e) => {
          this.$message.error(e);
        });
      },
      // 暂未使用
      onDone(file){
        this.form.matrixVideo = file;
        console.log("this.form.matrixVideo=====", this.form.matrixVideo)
      },
      uploadClick(){
        this.folderUpload = true;
      },
      /*功能详情，回显*/
      reload(data,type){
        console.log("功能详情，回显done=====",data,type)
        if(type==1){
          this.form.matrixDetails=data
        }
        if(type==2){
          this.form.clipDetails=data
        }
        if(type==3){
          this.form.pushDetails=data
        }
        if(type==4){
          this.form.largeDetails=data
        }
        if(type==5){
          this.form.doypagDetails=data
        }
        if(type==6){
          this.form.szrDetails=data
        }
      },
      // 添加详情
      addDetial(details, type){
        console.log("details,type",details,type)
        this.addShow = true;
        this.$nextTick(()=>{
          this.$refs['detail'].show(details, type)
        })

      },
      /* 上传 */
      // async onUpload(url) {
      /*
      *  type 1:矩阵视频
      *  type 2:剪辑视频
      *  type 3:云闪推视频
      *  type 4:现场大屏视频
      *  type 5:抖支付视频
      *  type 6:数字人视频
      * */
      async onUpload(url, fileList,type){
        console.log("进入上传1111111111",type)
        // 防止:on-change事件调用两次的问题
        if (url.status !== 'ready') return;
        console.log("进入上传222222")
        this.fileList=url
        console.log('this.fileList',this.fileList)
        this.data = await userOssSignature()
        let file = this.fileList.raw
        let filename = file.name;
        let markIndex = (filename).lastIndexOf('.');
        let suffix = filename.substring(markIndex)
        let date = new Date().getTime();
        // 构建请求参数
        let param = new FormData()
        param.append("key", this.data.dir + date + suffix)
        param.append("policy", this.data.policy)
        param.append("OSSAccessKeyId", this.data.accessId)
        param.append("success_action_status", '200')
        // param.append("callback",  this.data.callback)     //回调（not)
        param.append("signature", this.data.signature)
        param.append("file", file, file.name)
        param.append('success_action_status', '200')
        let config = {
          headers: {
            'Access-Control-Allow-Origin': '*',
            'x-oss-callback-Authorization': getToken()
          }
        }
        axios.post(this.data.host, param, config).then(res => {
          if (res.status == 200) {
            // 修改
            // this.$refs.upload.submit();  // 图片上传进度
            console.log('this.data.host', this.data.host + '/' + date + suffix,'type',type)
            let videoUrl = this.data.host + '/' + date + suffix;
            if(type==1){
              this.$set(this.form,'matrixVideo',videoUrl)
            }
            if(type==2){
              this.$set(this.form,'clipVideo',videoUrl)
              console.log('this.form.clipVideo',this.form.clipVideo)
            }
            if(type==3){
              this.$set(this.form,'pushVideo',videoUrl)
              console.log('this.form.pushVideo',this.form.pushVideo)
            }
            if(type==4){
              this.$set(this.form,'largeVideo',videoUrl)
              console.log('this.form.largeVideo',this.form.largeVideo)
            }
            if(type==5){
              this.$set(this.form,'doypayVideo',videoUrl)
              console.log('this.form.doypayVideo',this.form.doypayVideo)
            }
            if(type==6){
              this.$set(this.form,'szrVideo',videoUrl)
              console.log('this.form.szrVideo',this.form.szrVideo)
            }
          } else {
            this.loading = false
            this.$message.error('上传失败');
          }

        }).catch(err => {
          console.log(err)
        })
      },

      handleAvatarSuccess(res, file) {
        console.log("上传成功res, file----", res, file)
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 20;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 20MB!');
        }
        return isLt2M;
      },

      uploadApi(){
        this.loading = true;
        const data = {
          ...this.form
        };
        saveMobileConfig(data).then((msg) => {
          this.loading = false;
          this.$message.success('提交成功！');
          this.queryConfigs()
        }).catch((e) => {
          this.loading = false;
          this.$message.error(e);
        });
      },

      //提交保存
      submit(){
        this.$refs['form'].validate((valid, obj) => {
          if (valid) {
            // 手机号验证
            if(this.form.phoneNumber && this.$sun.checkModbile(this.form.phoneNumber)==false){
              this.$message.error('手机号码格式不正确！');
              return
            }
            this.validMsg = '';
            console.log('this.form====',this.form)

            // 上传图片未修改，则直接调用‘保存设备’接口
            if(this.data && this.fileList[0].url==this.data.coverImage){
              this.uploadApi()
            }
            else{
              this.uploadBj()
            }

          } else {
            this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped lang="less">
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }


  .video-avatar{
    height: 100px;
  }
  .positive-btn{
    z-index: 9;
    width: 26px;
    background: #fff;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    top: 39px;
    left: 39px;
    opacity: 0.7;
    i{
      font-size: 22px;
    }
  }
  /* ‘删除视频’ 图标 */
  .del-position{
    position: absolute;
    top:0px;
    left: 76px;
    /*right: 0px;*/
    width: 25px;
    height: 25px;
    z-index: 9;
    background-color: #666;
    border-radius: 0 0 0 20px;
    i{
      font-size: 14px;
      color: #fff;
      margin-top: -3px;
      margin-right: -2px;
      font-size: 16px;
      color:#fff;
    }
  }
  .no-hover{
    pointer-events: none;
  }
  .upload-demo{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .upload-demo:hover {
    border-color: #409EFF;
    i {
      color: #409EFF;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
